<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        form {
            width: 300px;
            margin: 100px auto;
            padding-bottom: 20px;
            border: 1px solid #2487c9;
        }

        .title {
            height: 40px;
            background-color: #2487c9;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }

        label {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding: 20px;
            padding-right: 35px;
            text-align: justify;
        }

        label>input {
            padding-left: 4px;
            border: 1px solid #999;
            border-radius: 2px;
            outline: none;
            vertical-align: middle;
        }

        input:focus {
            background-color: #f3f3f3;
        }

        input[type="submit"] {
            display: block;
            margin: 0 auto;
            margin-top: 20px;
            width: 60px;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <form action="">

        <p class="title">个人信息</p>
        <label for="username">
            用户名
            <input type="text" name="username" id="username">
        </label>
    </form>


    <script>

        var elements = [
            { tag: 'input', text: '用户名', attr: { type: 'text', name: 'username' } },
            { tag: 'input', text: '密码', attr: { type: 'password', name: 'userpass' } },
            { tag: 'input', text: '确认密码', attr: { type: 'password', name: 'userpass_confirm' } },
            { tag: 'input', attr: { type: 'submit', value: '提交' } }
        ];

        function FormBuilder(elements) {
            this.elements = elements;
        }

        FormBuilder.prototype.builder = function () {
            var str = "<p class='title'>个人信息</p>";
            //根据标签名称生成表单项
            for (var i = 0; i < elements.length; i++) {
                if (elements[i].tag == 'input') {
                    str += this.item(elements[i]);//   生成input标签的函数
                }
            }
            return str;
        }


        //input函数
        FormBuilder.prototype.item = function (value) {

            if (value.attr.type == 'text') {
                str = "<label for='" + value.attr.name + "'>" + value.text + "<input type='" + value.attr.type + "' name='" + value.attr.name + "' id='" + value.attr.name + "' >" + "</label >";
            } else if (value.attr.type == 'password') {
                str = "<label for='" + value.attr.name + "'>" + value.text + "<input type='" + value.attr.type + "' name=" + value.attr.name + "' id='" + value.attr.name + "' >" + "</label >";
            } else if (value.attr.type == 'submit') {
                str = "<input type='" + value.attr.type + "' value='" + value.attr.value + "' >";
            }
            return str;
        }

        var form01 = new FormBuilder(elements);
        var form = document.querySelector('form');
        form.innerHTML = form01.builder();

    </script>

</body>

</html>